<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><%= pageTitle %></title>
    <!--编码-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit" />
    <!-- IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- 宽度为屏幕宽度，默认缩放倍数为1，最大缩放倍数为1，最小缩放倍数为1，禁止用户手动缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 指定的苹果中safari顶端的状态条的样式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 告诉设备忽略将页面中的电话号码和email -->
    <meta name="format-detection" content="telephone=no, email=no" />

    <link rel="stylesheet" href="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/css/common.css">
    <link rel="stylesheet" href="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/css/iconfont.css">
    <style>
        .page-wrap {
            overflow: hidden;
            font-size: 0;
        }
        .page-wrap img {
            width: 100%;
        }

        .page-main .simple-module {
            position: relative;
        }
        .page-main .simple-module .link{
            position: absolute;
        }
        .page-main .simple-module .bg-img {
            width: 100%;
        }

        .page-main .menu-wrap{
            margin-bottom: 0.12rem;
            padding-right: 0.6rem;
            height: 0.84rem;
            position: relative;
        }
        .page-main .menu-wrap .btn{
            font-family: SimSun;
            width: 0.6rem;
            height: 0.84rem;
            line-height: 0.84rem;
            position: absolute;
            right: 0;
            top: 0;
            text-align: center;
            font-size: 0.26rem;
        }

        .page-main .menu-wrap .sp-menu{
            border-top: 1px solid #e2e2e2;
            padding: 0.12rem;
            overflow: hidden;
            margin-right: -0.6rem;
        }
        .page-main .menu-wrap .sp-menu .item{
            border: 1px solid #e2e2e2;
            padding: 0.12rem 0.18rem;
            font-size: 0.26rem;
            text-align: center;
            float: left;
            margin: 0.12rem;
        }
        .page-main .menu-scroll {
            width: 100%;
            height: 0.84rem;
            overflow-y: hidden;
            overflow-x: scroll;
            position: relative;
        }
        .page-main .menu-scroll ul {
            min-width: 100% !important;
            height: 0.84rem;
            line-height: 0.86rem;
        }
        .page-main .menu-scroll ul li {
            font-size: 0.36rem;
            float: left;
            padding: 0 0.24rem;
            text-align:center;
            height: 0.84rem;
            position: relative;
        }
        .page-main .menu-scroll ul li .line{
            position: absolute;
            left: 0.18rem;
            right: 0.18rem;
            bottom: 0;
            height: 2px;
            background-color: transparent;
            overflow: hidden;
        }
        .page-main .menu-fixed{
            position: fixed !important;
            top: 0;
            z-index: 999;
            width: 100%;
        }
        /* 导航当前楼层的字体颜色 */
        .page-main .menu-wrap .current {
            color: #ff3333;
        }

        /* 常规楼层 */
        .simple-floor {
            margin-top: 0.24rem;
        }
        .simple-floor .goods-list {
            overflow: hidden;
            margin-top: 0.12rem;
            padding: 0 0.03rem;
        }
        .simple-floor .goods-item {
            position: relative;
            font-size: 0.26rem;
            width: 33.3%;
            padding: 0 0.04rem;
            float: left;
            margin-bottom: 0.1rem;
        }
        .simple-floor .goods-item .placeholder-img {
            width: 100%;
            height: 4.4rem;
        }
        .simple-floor .goods-item .goods-detail {
            padding: 0.12rem;
            background-color: #ffffff;
            color: #303030;
            font-size: 0.34rem;
        }
        .simple-floor .goods-item .goods-detail .title {
            font-size: 0.28rem;
            margin-bottom: 0.12rem;
            height: 1.16rem;
            overflow: hidden;
        }
        .simple-floor .goods-item .goods-detail .price {
            line-height: 0.48rem;
            height: 0.48rem;
            margin-left: 0.06rem;
            font-size: 0.34rem;
            color: #ff2121;
        }
        .simple-floor .goods-item .goods-detail .buy {
            border-radius: 0.12rem;
            width: 0.48rem;
            height: 0.48rem;
            background: url('https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/icon.png') no-repeat;
            background-size: 100%;
            font-size: 0.26rem;
        }
        .simple-floor .goods-item .picture {
            width: 100%;
            height: 2.4rem;
            display: block;
            background: url('https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/place_holder_180.png') no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }

        /* 横向滑动楼层 */
        .slide-floor {
            margin-top: 0.24rem;
        }
        .slide-floor .goods-list {
            overflow-x: scroll;
            overflow-y: hidden;
            padding-top: 0.12rem;
        }
        .slide-floor .goods-list>div{
            padding: 0 0.03rem;
        }
        .slide-floor .goods-item {
            position: relative;
            font-size: 0.26rem;
            width: 3.4rem;
            height: 5.66rem;
            padding: 0 0.04rem;
            float: left;
            margin-bottom: 0.12rem;
        }
        .slide-floor .goods-item .goods-detail {
            padding: 0.12rem;
            background-color: #ffffff;
            color: #303030;
            font-size: 0.34rem;
        }
        .slide-floor .goods-item .goods-detail .title {
            font-size: 0.28rem;
            margin-bottom: 0.12rem;
            height: 1.17rem;
            overflow: hidden;
        }
        .slide-floor .goods-item .goods-detail .price {
            margin-left: 0.06rem;
            font-size: 0.38rem;
            color: #ff2121;
        }
        .slide-floor .goods-item .goods-detail .buy {
            border-radius: 0.12rem;
            width: 1.3rem;
            height: 0.42rem;
            line-height: 0.42rem;
            text-align: center;
            font-size: 0.26rem;
            background-color:#ff2121;
            color: #ffffff;
        }
        .slide-floor .goods-item .picture {
            width: 100%;
            height: 3.7rem;
            display: block;
            background: url('https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/place_holder_180.png') no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        .slide-floor .goods-item .placeholder-img {
            width: 100%;
            height: 100%;
        }

        .two-col-floor {
            margin-top: 0.24rem;
        }
        .two-col-floor .floor-wrap {
            padding: 0.12rem 0 0.12rem 0.12rem;
            overflow: hidden;
        }
        .two-col-floor .goods-item {
            position: relative;
            font-size: 0.26rem;
            width: 50%;
            height: 4.98rem;
            padding-right: 0.12rem;
            float: left;
            overflow: hidden;
            margin-bottom: 0.12rem;
        }
        .two-col-floor .goods-item .placeholder-img{
            width: 100%;
            height: 100%;
            border-radius: 0.16rem;
        }
        .two-col-floor .goods-item-inner{
            border-radius: 0.16rem;
            height: 4.98rem;
            overflow: hidden;
        }
        .two-col-floor .goods-item .brand-picture {
            display: block;
            width: 100%;
            height: 100%;
        }
        .two-col-floor .goods-item .picture {
            width: 100%;
            height: 3.58rem;
            display: block;
            background: url('https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/place_holder_180.png') no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        .two-col-floor .goods-item .goods-detail {
            height: 1.4rem;
            padding: 0.12rem;
            position: relative;
            background-color: #ffffff;
            color: #303030;
        }
        .two-col-floor .goods-item .goods-detail .title {
            margin-bottom: 0.12rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 0.36rem;
        }
        .two-col-floor .goods-item .goods-detail .price {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 0.28rem;
            line-height: 0.6rem;
        }
        .two-col-floor .goods-item .goods-detail .price span{
            margin-left: 0.06rem;
            font-size: 0.42rem;
            color: #ff2121;
            font-weight: bold;
        }
        .two-col-floor .goods-item .goods-detail .buy {
            position: absolute;
            width: 0.48rem;
            height: 0.48rem;
            background: url('https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/icon-cart.png') no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
            right: 0.2rem;
            bottom: 0.18rem;
        }

        /* 修改轮播图高度 height */
        .swipe {
            position: relative;
            overflow: hidden;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .swipe .arrow-icon{
            position: absolute;
            z-index: 2;
            cursor: pointer;
        }
        .swipe-banner{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .swipe-banner a{
            display: none;
            width: 100%;
            height: 100%;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        .swipe-banner a.show {
            display: block;
        }
        .swipe-banner img{
            width: 100%;
            height: 100%;
        }
        .swipe ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 400%;
            height: 100%;
        }
        .swipe ul li{
            float: left;
            width: 25%;
            height: 100%;
        }

        .swipe ul li a {
            display: block;
            height: 100%;
            height: 100%;
        }
        .swipe ul li a img{
            display: block;
            height: 100%;
            width: 100%;
        }

        .swipe ol {
            position: absolute;
            bottom: 0.2rem;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .swipe ol li{
            float: left;
            margin: 0 0.12rem;
            -webkit-border-radius: 0.16rem;
            -moz-border-radius: 0.16rem;
            border-radius: 0.16rem;
            width: 0.16rem;
            height: 0.16rem;
            background-color: #ffffff;
            box-shadow: 0 0 2px #999999;
        }
        .swipe ol li.current {
            background-color: #ff3333;
        }
        .swipe .trans {
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        .mask{
            position: fixed;
            z-index: 99;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
        }
        .modal-module{
            position: fixed;
            z-index: 100;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .modal-module-inner{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .modal-module img{
            width: 100%;
            height: 100%;
        }

        .fixed-box-module{
            position: fixed;
            z-index: 5;
        }
        .fixed-box-module img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="J-app">
    <!-- 页面背景色 background-color: #000000 16进制颜色值 -->
    <div class="page-wrap" style="background-color: <%= pageBgColor %>;" v-cloak>
        <div class="page-main">
            <%
            moduleList.forEach(function (module, moduleIndex) {
                if (module.moduleType == 'simple') {
            %>
                <!-- 常规模块 -->
                <div class="simple-module" id="J-module-<%= moduleIndex + 1 %>">
                    <%
                    module.linkList.forEach(function (link, linkIndex) {
                        var linkHref = '';
                        if (link.linkType == 'module' || link.linkType == 'floor') {
                            linkHref = '#J-' + link.linkType + '-' + link[link.linkType + 'Index'];
                        } else if (link.linkType == 'goods') {
                            linkHref = 'fmcgshop://goods/' + link.linkValue + '?isPresell=false';
                        } else if (link.linkType == 'activity') {
                            linkHref = 'fmcgshop://activity/' + link.linkValue;
                        } else if (link.linkType == 'packActivity') {
                            linkHref = 'fmcgshop://packActivity/' + link.linkValue;
                        } else if (link.linkType == 'coupon') {
                            linkHref = 'fmcgshop://coupon/' + link.linkValue;
                        } else if (link.linkType == 'myCoupons') {
                            linkHref = 'fmcgshop://mycoupons';
                        } else if (link.linkType == 'newCart') {
                            linkHref = 'fmcgshop://newCart';
                        } else if (link.linkType == 'pageTop') {
                            linkHref = '#';
                        } else if (link.linkType == 'smallProgram') {
                            linkHref = 'openMiniProgram(\'' + link.linkValue + '\')';
                        } else if (link.linkType == 'modalOpen') {
                            linkHref = 'openModal(\'' + link.modalIndex + '\')';
                        } else if (link.linkType == 'modalClose') {
                            linkHref = 'closeModal()';
                        } else if (link.linkType == 'other') {
                            linkHref = link.linkValue;
                        }

                        if (link.linkType == 'smallProgram' || link.linkType == 'modalOpen' || link.linkType == 'modalClose') {
                            linkHref = '@click="' + linkHref + '"';
                        } else {
                            linkHref = '@click="handlePageChange(\'' + linkHref + '\')"';
                        }
                    %>
                    <a <%= linkHref %>
                       style="position: absolute; top: <%= link.top / 100 %>rem; left: <%= link.left / 100 %>rem; width: <%= link.width / 100 %>rem; height: <%= link.height / 100 %>rem;">
                    </a>
                    <%
                    });
                    %>
                    <img class="bg-img" src="<%= module.bgImg %>">
                </div>
                <% } else if (module.moduleType == 'floor' || module.moduleType == 'slideFloor') { %>
                <!-- 商品楼层 -->
                <div id="J-module-<%= moduleIndex + 1 %>">
                    <div v-show="flag"
                         v-for="(activityItem, index) in activityData">

                        <div class="simple-module"
                             v-if="activityItem.hotAreaBgImg">
                            <span v-for="link in activityItem.linkList">
                                <a v-if="!link.isEvent"
                                   @click="handlePageChange(link.url)"
                                   style="position: absolute;"
                                   :style="{top: (link.top / 100) + 'rem', left: (link.left / 100) + 'rem', width: (link.width / 100) + 'rem', height: (link.width / 100) + 'rem'}">
                                </a>
                                <a v-if="link.isEvent"
                                   @click="handleEventLinkClick(link.url)"
                                   style="position: absolute;"
                                   :style="{top: (link.top / 100) + 'rem', left: (link.left / 100) + 'rem', width: (link.width / 100) + 'rem', height: (link.width / 100) + 'rem'}">
                                </a>
                            </span>
                            <img class="bg-img" :src="activityItem.hotAreaBgImg">
                        </div>

                        <div :id="'J-floor-' + index"
                             :class="activityItem.floorCls">
                            <template v-if="activityItem.floorType == 'simple'">
                                <!--常规三列型楼层-->
                                <div>
                                    <a v-if="activityItem.image"
                                       :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId">
                                        <img :src="activityItem.image">
                                    </a>

                                    <div class="goods-list">
                                        <div class="goods-item"
                                             v-for="(goodsItem, index) in activityItem.goodsList"
                                             v-if="index < (activityItem.goodsList > 45 ? 44 : 45)">
                                            <a :href="goodsItem.link">
                                                <img class="picture" :src="goodsItem.thumb">
                                                <div class="goods-detail">
                                                    <div class="oh">
                                                        <p class="title">{{ goodsItem.title }}</p>
                                                        <div class="fl">
                                                            <p>¥<span class="price">{{goodsItem.discountPrice ? goodsItem.discountPrice : goodsItem.price}}</span></p>
                                                        </div>
                                                        <div class="fr">
                                                            <p class="buy" @click="addToCart($event, goodsItem.goodsId)"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>

                                        <a :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId"
                                           class="goods-item"
                                           v-if="activityItem.goodsList > 45">
                                            <img class="placeholder-img" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/more.jpg">
                                        </a>
                                    </div>
                                </div>
                            </template>

                            <template v-if="activityItem.floorType == 'slide'">
                                <!--横向滑动型楼层-->
                                <a v-if="activityItem.image"
                                   :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId">
                                    <img :src="activityItem.image">
                                </a>

                                <div class="goods-list">
                                    <!-- 宽度需要自己计算-->
                                    <div :style="{width: ((activityItem.goodsList.length < 24 ? activityItem.goodsList.length : 24) * 3.4) + 0.06 + 'rem'}"
                                         class="clearfix">
                                        <div class="goods-item"
                                             v-for="(goodsItem, index) in activityItem.goodsList"
                                             v-if="index < (activityItem.goodsList > 24 ? 23 : 24)">
                                            <a :href="goodsItem.link">
                                                <img class="picture" :src="goodsItem.thumb">
                                                <div class="goods-detail">
                                                    <div class="oh">
                                                        <p class="title">{{ goodsItem.title }}</p>
                                                        <div class="fl">
                                                            <p>¥<span class="price">{{ goodsItem.discountPrice ? goodsItem.discountPrice : goodsItem.price}}</span></p>
                                                        </div>
                                                        <div class="fr">
                                                            <p class="buy" @click="addToCart($event, goodsItem.goodsId)">点击购买</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>

                                        <a :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId"
                                           class="goods-item"
                                           v-if="activityItem.goodsList > 24">
                                            <img class="placeholder-img" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/more.jpg">
                                        </a>
                                    </div>
                                </div>
                            </template>

                            <template v-if="activityItem.floorType == 'twoCol'">
                                <!--双列型楼层-->
                                <a v-if="activityItem.imagePosition == 'top' && activityItem.image"
                                   :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId">
                                    <img :src="activityItem.image">
                                </a>

                                <div class="floor-wrap">
                                    <div class="goods-item"
                                         v-if="activityItem.imagePosition == 'in'">
                                        <div class="goods-item-inner">
                                            <a :href="'fmcgshop://activity/' + activityItem.activityId">
                                                <img class="brand-picture" :src="activityItem.image">
                                            </a>
                                        </div>
                                    </div>

                                    <div v-for="(goodsItem, index) in activityItem.goodsList"
                                         v-if="index < (activityItem.imagePosition == 'top' ? (activityItem.goodsList > 30 ? 29 : 30) : (activityItem.goodsList > 29 ? 28 : 29))"
                                         class="goods-item">
                                        <div class="goods-item-inner">
                                            <a :href="'fmcgshop://goods/' + goodsItem.goodsId + '?isPresell=false'">
                                                <img class="picture" :src="goodsItem.thumb">
                                                <!-- 商品描述背景颜色 background-color: #16进制颜色值 字体颜色 -->
                                                <div class="goods-detail">
                                                    <p class="title">{{ goodsItem.title }}</p>
                                                    <p class="price">
                                                        畅销价:¥
                                                        <span>
                                                        {{ goodsItem.discountPrice ? goodsItem.discountPrice : goodsItem.price}}
                                                    </span>
                                                    </p>
                                                    <i class="buy" @click="addToCart($event, goodsItem.goodsId)"></i>
                                                </div>
                                            </a>
                                        </div>
                                    </div>

                                    <a :href="(activityItem.activityType == 'promotion' ? 'fmcgshop://activity/' : 'fmcgshop://packActivity/') + activityItem.activityId"
                                       class="goods-item"
                                       v-if="activityItem.goodsList > (activityItem.imagePosition == 'top' ? 30 : 29)">
                                        <img class="placeholder-img" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/img/more.jpg">
                                    </a>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <% } else if (module.moduleType == 'floorMenu') { %>
                <!--楼层导航-->
                <div id="J-module-<%= moduleIndex + 1 %>">
                    <div id="menu"
                         v-if="activityData.length > 1"
                         class="menu-wrap"
                         style="background-color: <%= module.menuBgColor %>; color: <%= module.menuFontColor %>;"
                         v-show="flag">
                        <div class="menu menu-scroll"
                             :class="{'menu-fixed': isFixed}"
                             style="background-color: <%= module.menuBgColor %>; color: <%= module.menuFontColor %>;">
                            <ul class="clearfix"
                                :style="{'width': ulWidth + 'px'}">
                                <li v-for="(activityItem, index) in activityData"
                                    :class="{current: activityItem.flag}"
                                    :style="{color: activityItem.flag ? '<%= module.menuCurColor %>' : ''}"
                                    @click="toTitle('J-floor-' + index, activityItem, index, $event)">
                                    {{ activityItem.activityTitle }}
                                    <div class="line"
                                         :style="{backgroundColor: activityItem.flag ? '<%= module.menuCurColor %>' : ''}">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <span class="btn iconfont"
                              :class="{'icon-jiantouxia': !allMenuVisible, 'icon-jiantoushang': allMenuVisible}"
                              @click="toggleAllMenu">
                        </span>

                        <ul class="sp-menu"
                            v-show="allMenuVisible">
                            <li class="item"
                                v-for="(activityItem, index) in activityData"
                                @click="toTitle('J-floor-' + index, activityItem, index, $event)">
                                {{ activityItem.activityTitle }}
                            </li>
                        </ul>
                    </div>
                </div>
                <% } else if (module.moduleType == 'slideBanner') { %>
                <!--滑动Banner-->
                <div class="swipe clearfix" style="height: <%= module.moduleHeight / 100 %>rem; background-image: <%= module.bgImg ? 'url(\'' + module.bgImg + '\')' : 'none' %>;">
                    <% if (module.bannerHotAreaFlag) { %>
                    <i class="arrow-icon"
                       style="top: <%= module.linkList[0].top / 100 %>rem;
                              left:  <%= module.linkList[0].left / 100 %>rem;
                              height: <%= module.linkList[0].height / 100 %>rem;
                              width:  <%= module.linkList[0].width / 100 %>rem;"
                       @click="switchSwiper('prev')"></i>
                    <i class="arrow-icon"
                       style="top: <%= module.linkList[1].top / 100 %>rem;
                              left:  <%= module.linkList[1].left / 100 %>rem;
                              height: <%= module.linkList[1].height / 100 %>rem;
                              width:  <%= module.linkList[1].width / 100 %>rem;"
                       @click="switchSwiper('next')"></i>
                    <% } %>

                    <ul <% if (module.bannerSwitchEffect == 'slide') { %>
                        @touchstart="handleTouchStart"
                        @touchmove="handleTouchMove"
                        @touchend="handleTouchEnd"
                        :class="{trans: isMove}"
                        <% } %>
                        :style="{left: offsetLeft + 'px'}">
                        <li v-for="(item, sIndex) in swiperList"
                            :key="sIndex">
                            <a v-if="!item.isEvent"
                               @click="handlePageChange(item.url)">
                                <img :src="item.image">
                            </a>
                            <a v-if="item.isEvent"
                               @click="handleBannerClick(item.url)">
                                <img :src="item.image">
                            </a>
                        </li>
                    </ul>
                    <% if (module.bannerBottomBtnFlag) { %>
                    <ol>
                        <li v-for="(item, sIndex) in swiperList"
                            :key="sIndex"
                            :class="{current: sIndex == index}">
                        </li>
                    </ol>
                    <% } %>
                </div>
                <% } else if (module.moduleType == 'modal') { %>
                <!--页面弹窗-->
                <div class="modal-module"
                     v-show="modalMap['<%= moduleIndex %>'].visible"
                    style="width: <%= module.moduleWidth / 100 %>rem; height: <%= module.moduleHeight / 100 %>rem;">
                    <div class="modal-module-inner">
                        <%
                        module.linkList.forEach(function (link, linkIndex) {
                            var linkHref = '';
                            if (link.linkType == 'module' || link.linkType == 'floor') {
                                linkHref = '#J-' + link.linkType + '-' + link[link.linkType + 'Index'];
                            } else if (link.linkType == 'goods') {
                                linkHref = 'fmcgshop://goods/' + link.linkValue + '?isPresell=false';
                            } else if (link.linkType == 'activity') {
                                linkHref = 'fmcgshop://activity/' + link.linkValue;
                            } else if (link.linkType == 'packActivity') {
                                linkHref = 'fmcgshop://packActivity/' + link.linkValue;
                            } else if (link.linkType == 'coupon') {
                                linkHref = 'fmcgshop://coupon/' + link.linkValue;
                            } else if (link.linkType == 'myCoupons') {
                                linkHref = 'fmcgshop://mycoupons';
                            } else if (link.linkType == 'newCart') {
                                linkHref = 'fmcgshop://newCart';
                            } else if (link.linkType == 'pageTop') {
                                linkHref = '#';
                            } else if (link.linkType == 'smallProgram') {
                                linkHref = 'openMiniProgram(\'' + link.linkValue + '\')';
                            } else if (link.linkType == 'modalOpen') {
                                linkHref = 'openModal(\'' + link.modalIndex + '\')';
                            } else if (link.linkType == 'modalClose') {
                                linkHref = 'closeModal()';
                            } else if (link.linkType == 'other') {
                                linkHref = link.linkValue;
                            }

                            if (link.linkType == 'smallProgram' || link.linkType == 'modalOpen' || link.linkType == 'modalClose') {
                                linkHref = '@click="' + linkHref + '"';
                            } else {
                                linkHref = '@click="handlePageChange(\'' + linkHref + '\')"';
                            }
                        %>
                        <a <%= linkHref %>
                           style="position: absolute; top: <%= link.top / 100 %>rem; left: <%= link.left / 100 %>rem; width: <%= link.width / 100 %>rem; height: <%= link.height / 100 %>rem;">
                        </a>
                        <%
                        });
                        %>

                        <img src="<%= module.bgImg%>">
                    </div>
                </div>
                <% } else if (module.moduleType == 'fixedBox') { %>
                <!--悬浮窗-->
                <div class="fixed-box-module"
                     style="<%= module.topOrBottom %>: <%= (module.topOrBottom == 'top' ? module.moduleTop : module.moduleBottom) / 100 %>rem; <%= module.leftOrRight %>: <%= (module.leftOrRight == 'left' ? module.moduleLeft : module.moduleRight) / 100 %>rem; width: <%= module.moduleWidth / 100 %>rem; height: <%= module.moduleHeight / 100 %>rem;">
                    <%
                    var linkHref = '';
                    var link = module.linkList[0];
                    if (link.linkType == 'module' || link.linkType == 'floor') {
                        linkHref = '#J-' + link.linkType + '-' + link[link.linkType + 'Index'];
                    } else if (link.linkType == 'goods') {
                        linkHref = 'fmcgshop://goods/' + link.linkValue + '?isPresell=false';
                    } else if (link.linkType == 'activity') {
                        linkHref = 'fmcgshop://activity/' + link.linkValue;
                    } else if (link.linkType == 'packActivity') {
                        linkHref = 'fmcgshop://packActivity/' + link.linkValue;
                    } else if (link.linkType == 'coupon') {
                        linkHref = 'fmcgshop://coupon/' + link.linkValue;
                    } else if (link.linkType == 'myCoupons') {
                        linkHref = 'fmcgshop://mycoupons';
                    } else if (link.linkType == 'newCart') {
                        linkHref = 'fmcgshop://newCart';
                    } else if (link.linkType == 'pageTop') {
                        linkHref = '#';
                    } else if (link.linkType == 'smallProgram') {
                        linkHref = 'openMiniProgram(\'' + link.linkValue + '\')';
                    } else if (link.linkType == 'modalOpen') {
                        linkHref = 'openModal(\'' + link.modalIndex + '\')';
                    } else if (link.linkType == 'modalClose') {
                        linkHref = 'closeModal()';
                    } else if (link.linkType == 'other') {
                        linkHref = link.linkValue;
                    }

                    if (link.linkType == 'smallProgram' || link.linkType == 'modalOpen' || link.linkType == 'modalClose') {
                        linkHref = '@click="' + linkHref + '"';
                    } else {
                        linkHref = '@click="handlePageChange(\'' + linkHref + '\')"';
                    }
                    %>
                    <a <%= linkHref %>>
                        <img src="<%= module.bgImg%>">
                    </a>
                </div>
            <%
                }
            });
            %>
        </div>
    </div>

    <div class="mask" v-show="maskVisible"></div>
</div>

<script>
    <%
        var floorModule = moduleList.filter(function (module, moduleIndex) { return (module.moduleType == 'floor' || module.moduleType == 'slideFloor'); })[0];
        var bannerModule = moduleList.filter(function (module, moduleIndex) { return module.moduleType == 'slideBanner'; })[0];

        var activityList = floorModule ? floorModule.floorList.map(function (item) {
            if (item.floorType === undefined) {
                // moduleType 与 floorType 的对应关系
                var obj = {
                    floor: 'simple',
                    slideFloor: 'slide'
                };
                // 如果 floorType 未定义，则说明这是1期的数据，补上 floorType 属性
                item.floorType = obj[floorModule.moduleType];
            }
            if (item.titleImgPosition === undefined) {
                item.titleImgPosition = 'top';
            }
            if (item.hotAreaBgImg === undefined) {
                item.hotAreaBgImg = '';
            }
            if (item.linkList === undefined) {
                item.linkList = [];
            }

            var floorClsMap = {
                simple: 'simple-floor',
                slide: 'slide-floor',
                twoCol: 'two-col-floor'
            };

            item.linkList.forEach(function (link) {
                var linkHref = '';
                var isEvent = false;
                if (link.linkType == 'module' || link.linkType == 'floor') {
                    linkHref = '#J-' + link.linkType + '-' + link[link.linkType + 'Index'];
                } else if (link.linkType == 'goods') {
                    linkHref = 'fmcgshop://goods/' + link.linkValue + '?isPresell=false';
                } else if (link.linkType == 'activity') {
                    linkHref = 'fmcgshop://activity/' + link.linkValue;
                } else if (link.linkType == 'packActivity') {
                    linkHref = 'fmcgshop://packActivity/' + link.linkValue;
                } else if (link.linkType == 'coupon') {
                    linkHref = 'fmcgshop://coupon/' + link.linkValue;
                } else if (link.linkType == 'myCoupons') {
                    linkHref = 'fmcgshop://mycoupons';
                } else if (link.linkType == 'newCart') {
                    linkHref = 'fmcgshop://newCart';
                } else if (link.linkType == 'pageTop') {
                    linkHref = '#';
                } else if (link.linkType == 'smallProgram') {
                    linkHref = 'openMiniProgram@^@' + link.linkValue;
                } else if (link.linkType == 'modalOpen') {
                    linkHref = 'openModal@^@' + link.modalIndex;
                } else if (link.linkType == 'modalClose') {
                    linkHref = 'closeModal';
                } else if (link.linkType == 'other') {
                    linkHref = link.linkValue;
                }

                if (link.linkType == 'smallProgram' || link.linkType == 'modalOpen' || link.linkType == 'modalClose') {
                    isEvent = true;
                }

                link.url = linkHref;
                link.isEvent = isEvent;
            });

            return {
                flag: false,
                activityTitle: item.name,
                title: item.name,
                activityType: item.activityType,
                activityId: item.activityId,
                floorType: item.floorType,
                floorCls: floorClsMap[item.floorType],
                image: item.titleImg,
                imagePosition: item.titleImgPosition,
                hotAreaBgImg: item.hotAreaBgImg,
                linkList: item.linkList,
                goodsList: [
                    {
                        title: 'loading',
                        discountPrice: 'loading'
                    }
                ]
            };
        }) : [];

        var swiperList = bannerModule ? bannerModule.bannerList.map(function (item) {
            var linkHref = '';
            var isEvent = false;
            if (item.linkType == 'module' || item.linkType == 'floor') {
                linkHref = '#J-' + item.linkType + '-' + item[item.linkType + 'Index'];
            } else if (item.linkType == 'goods') {
                linkHref = 'fmcgshop://goods/' + item.linkValue + '?isPresell=false';
            } else if (item.linkType == 'activity') {
                linkHref = 'fmcgshop://activity/' + item.linkValue;
            } else if (item.linkType == 'packActivity') {
                linkHref = 'fmcgshop://packActivity/' + item.linkValue;
            } else if (item.linkType == 'coupon') {
                linkHref = 'fmcgshop://coupon/' + item.linkValue;
            } else if (item.linkType == 'myCoupons') {
                linkHref = 'fmcgshop://mycoupons';
            } else if (link.linkType == 'newCart') {
                linkHref = 'fmcgshop://newCart';
            } else if (item.linkType == 'pageTop') {
                linkHref = '#';
            } else if (item.linkType == 'smallProgram') {
                linkHref = 'openMiniProgram@^@' + item.linkValue;
            } else if (item.linkType == 'modalOpen') {
                linkHref = 'openModal@^@' + item.modalIndex;
            } else if (item.linkType == 'modalClose') {
                linkHref = 'closeModal';
            } else if (item.linkType == 'other') {
                linkHref = item.linkValue;
            }

            if (item.linkType == 'smallProgram' || item.linkType == 'modalOpen' || item.linkType == 'modalClose') {
                isEvent = true;
            }

            return {
                image: item.img,
                url: linkHref,
                isEvent: isEvent
            };
        }) : [];

        var modalMap = {};
        moduleList.forEach(function (module, moduleIndex) {
            if (module.moduleType == 'modal') {
                modalMap[moduleIndex] = module;
                modalMap[moduleIndex].visible = false;
            }
        });
    %>
    window.activityList = <%= JSON.stringify(activityList) %>;
    window.swiperList = <%= JSON.stringify(swiperList) %>;
    window.modalMap = <%= JSON.stringify(modalMap) %>;
    window.spCode = '<%= testUser + testPassword %>';
    window.shareConfig = {
        faceImgUrl: '<%= faceImgUrl || '' %>',
        contentImgUrl: '<%= contentImgUrl || '' %>'
    };
</script>

<script type="text/javascript" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/lib/vue.min.js"></script>
<script type="text/javascript" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/lib/vue-resource.min.js"></script>
<script type="text/javascript" src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/js/common.js?v=?v=20190717a"></script>

<script src="https://zskx-img.oss-cn-qingdao.aliyuncs.com/h5-activity/static/js/activity-page.js?v=20190116a"></script>
</body>
</html>
